<template>
  <el-row class="mt-8px" :gutter="8" justify="space-between">
    <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="never">
        <template #header>
          <div class="flex justify-between h-3">
            <span>{{ t('cms.system.check.mem') }}</span>
          </div>
        </template>
        <div class="px-3 py-5 mt-3 app-block">
          <div ref="memChart" class="h-64"></div>
        </div>
      </el-card>
    </el-col>
    <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="never">
        <template #header>
          <div class="flex justify-between h-3">
            <span>{{ t('cms.system.check.cpu') }}</span>
          </div>
        </template>
        <div class="px-3 py-5 mt-3 app-block">
          <div ref="cpuChart" class="h-64"></div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row class="mt-8px" :gutter="8" justify="space-between">
    <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="never">
        <template #header>
          <div class="flex justify-between h-3">
            <span>{{ t('cms.system.check.jvm') }}</span>
          </div>
        </template>
        <div class="px-3 py-5 mt-3 app-block">
          <div ref="jvmChart" class="h-64"></div>
        </div>
      </el-card>
    </el-col>
    <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="never">
        <template #header>
          <div class="flex justify-between h-3">
            <span>{{ t('cms.system.check.disk') }}</span>
          </div>
        </template>
        <div class="px-3 py-5 mt-3 app-block">
          <div ref="diskChart" class="h-64"></div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row class="mt-8px" :gutter="8" justify="space-between">
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="never">
        <div class="px-3 py-5 mt-3 app-block">
        {{ t('cms.system.check.os') }} : 操作系统 {{sysInfoRef?.systemDetails.osName}}   服务器架构 {{sysInfoRef?.systemDetails.osArch}}  
        ip:{{sysInfoRef?.systemDetails.computerIp}}  
        Mac:{{sysInfoRef?.systemDetails.macAddress}}
        </div> 
        <div class="px-3 py-5 mt-3 app-block">
        {{ t('cms.system.check.cpuProcess') }} :
        <span class="p-1 mt-1">数量:{{sysInfoRef?.cpu.physicalCpuNum}}</span>
        <span class="p-1 mt-1">内核:{{sysInfoRef?.cpu.cpuNum}}</span>
        </div> 
        <div class="px-3 py-5 mt-3 app-block">
        {{ t('cms.system.check.physicalMem') }} :
        <span class="p-1 mt-1">总量:{{sysInfoRef?.memory.total}}Gb</span>
        <span class="p-1 mt-1">已用:{{sysInfoRef?.memory.used}}Gb</span>
        <span class="p-1 mt-1">剩余:{{sysInfoRef?.memory.free}}Gb</span>
        </div> 
        <div class="px-3 py-5 mt-3 app-block">
        {{ t('cms.system.check.jvmInfo') }} :
        <span class="p-1 mt-1">占用:{{sysInfoRef?.jvm.total}}MB</span>
        <span class="p-1 mt-1">最大可用:{{sysInfoRef?.jvm.max}}MB</span>
        <span class="p-1 mt-1">剩余:{{sysInfoRef?.jvm.free}}MB</span>
        <span class="p-1 mt-1">JDK版本:{{sysInfoRef?.jvm.version}}</span>
        <span class="p-1 mt-1"> JDK路径:{{sysInfoRef?.jvm.home}}</span>
        </div> 
        <div class="p-3 py-5 mt-3 app-block">
        {{ t('cms.system.check.diskInfo') }} :
        <div v-for="(item, index) in sysInfoRef?.sysFiles" :key="index" class="flex">
            <span class="p-1 mt-1">路径：{{item.dirName}}</span>
            <span  class="p-1 mt-1">总:{{item.total}}</span>  
            <span  class="p-1 mt-1">剩余:{{item.free}}</span>  
            <span  class="p-1 mt-1">已使用:{{item.used}}</span>
            <span  class="p-1 mt-1"> 使用率:{{item.usage}}%</span>  
         </div>
        </div> 
      </el-card>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import echarts, { ECOption } from '@/plugins/echarts'
import { getRealTimeSysInfo,getSysInfo } from '@/api/cms/system'


const { t } = useI18n()
dayjs.extend(duration)

defineOptions({ name: 'Home' })
//监测的时间秒数
const second = 360 ;
let realTimeSysInfo = {};
const memChart = shallowRef<HTMLElement>()
let memorys = [];
const initMemChart = async () => {
  realTimeSysInfo = await getRealTimeSysInfo()
  if(memorys.length>second){
    const memorys2 = memorys.slice(-second);
    memorys =  [...memorys2];
  }
  memorys.push({"time":realTimeSysInfo.time,"memory":realTimeSysInfo.memory})
  const option: ECOption = {
    tooltip: { trigger: 'axis' },
    legend: { data: [t('cms.system.check.mem')] },
    grid: { left: 16, right: 16, top: 40, bottom: 0, containLabel: true },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisTick: { show: false },
      data: memorys.map((item) => item.time)
    },
    yAxis: { type: 'value', minInterval: 1 },
    series: [
      {
        name: t('cms.system.check.mem'),
        type: 'line',
        symbol: 'circle',
        color: '#a0cfff',
        data: memorys.map((item) => item.memory)
      }
    ]
  }
  const chartDom = memChart.value
  if (chartDom == null) {
    return
  }
  let chart = echarts.getInstanceByDom(chartDom)
  if (chart == null) {
    chart = echarts.init(chartDom)
  }
  chart.setOption(option)
  window.addEventListener('resize', function () {
    chart && chart.resize()
  })
}
const cpuChart = shallowRef<HTMLElement>()
let cpus = [];
const initCpuChart = async () => {
  if(cpus.length>second){
    const cpus2 = cpus.slice(-second);
    cpus =  [...cpus2];
  }
  if(realTimeSysInfo.time!=null){
    cpus.push({"time":realTimeSysInfo.time,"cpu":realTimeSysInfo.cpu})
  }
  const option: ECOption = {
    tooltip: { trigger: 'axis' },
    legend: { data: [t('cms.system.check.cpu')] },
    grid: { left: 16, right: 16, top: 40, bottom: 0, containLabel: true },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisTick: { show: false },
      data: cpus.map((item) => item.time)
    },
    yAxis: { type: 'value', minInterval: 1 },
    series: [
      {
        name: t('cms.system.check.cpu'),
        type: 'line',
        symbol: 'circle',
        color: '#a0cfff',
        data: cpus.map((item) => item.cpu)
      }
    ]
  }
  const chartDom = cpuChart.value
  if (chartDom == null) {
    return
  }
  let chart = echarts.getInstanceByDom(chartDom)
  if (chart == null) {
    chart = echarts.init(chartDom)
  }
  chart.setOption(option)
  window.addEventListener('resize', function () {
    chart && chart.resize()
  })
}

const jvmChart = shallowRef<HTMLElement>()
let jvms = [];
const initJvmChart = async () => {
  if(jvms.length>second){
    const jvms2 = jvms.slice(-second);
    jvms =  [...jvms2];
  }
  if(realTimeSysInfo.time!=null){
    jvms.push({"time":realTimeSysInfo.time,"jvm":realTimeSysInfo.jvm})
  }
  const option: ECOption = {
    tooltip: { trigger: 'axis' },
    legend: { data: [t('cms.system.check.jvm')] },
    grid: { left: 16, right: 16, top: 40, bottom: 0, containLabel: true },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisTick: { show: false },
      data: jvms.map((item) => item.time)
    },
    yAxis: { type: 'value', minInterval: 1 },
    series: [
      {
        name: t('cms.system.check.jvm'),
        type: 'line',
        symbol: 'circle',
        color: '#a0cfff',
        data: jvms.map((item) => item.jvm)
      }
    ]
  }
  const chartDom = jvmChart.value
  if (chartDom == null) {
    return
  }
  let chart = echarts.getInstanceByDom(chartDom)
  if (chart == null) {
    chart = echarts.init(chartDom)
  }
  chart.setOption(option)
  window.addEventListener('resize', function () {
    chart && chart.resize()
  })
}

const diskChart = shallowRef<HTMLElement>()
const sysInfoRef = ref();
const initDiskChart = async () => {
  const sysInfo = await getSysInfo()
  const disks = sysInfo.sysFiles 
  sysInfoRef.value = sysInfo
  console.log("sysInfoRef->",sysInfoRef)
  const dirNames = disks.map(item => item.dirName);
  const totals = disks.map(item => item.totalGb);
  const useds = disks.map(item => item.usedGb);
  const option : ECOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: dirNames
    },
    series: [
      {
        name: 'used',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: useds
      },
      {
        name: 'total',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: totals
      }
    ]
  }
  const chartDom = diskChart.value
  if (chartDom == null) {
    return
  }
  let chart = echarts.getInstanceByDom(chartDom)
  if (chart == null) {
    chart = echarts.init(chartDom)
  }
  chart.setOption(option)
  window.addEventListener('resize', function () {
    chart && chart.resize()
  })
}
const getAllApi = async () => {
  await Promise.all([
    initMemChart(),
    initCpuChart(),
    initJvmChart()
  ])
}

getAllApi()
/** 初始化 */
// 定义定时器变量
let timer;
onMounted(async () => {
  timer = setInterval(function () {
    initMemChart()
    initCpuChart()
    initJvmChart()
  }, 3000)
  initDiskChart()
}) 
// 在组件卸载时清除定时器
onUnmounted(() => {
  clearInterval(timer);
});
</script>
